<template>
  <div class="awaitBillBox">
    <Loading :loading="loading">
      <!-- <h2 class="titleBox">金额异常</h2> -->
      <Form :ref="formRef" :label-width="130" :model="formOrderData" inline>
      <h2 class="titleBox" v-if="setttleType == '1'">规则缺失</h2>
      <h2 class="titleBox" v-if="setttleType == '2'">金额异常</h2>
        <h3 class="title">订单信息</h3>
        <div class="formList">
          <FormItem label="子订单号:" style="width:30%">
            <div>{{formOrderData.subOrderId}}</div>
          </FormItem>
          <FormItem label="主订单号:" style="width:30%">
            <div>{{formOrderData.orderId}}</div>
          </FormItem>
          <FormItem label="商品订单下单时间:" style="width:30%">
            <div>{{formOrderData.createdDt}}</div>
          </FormItem>
          <FormItem label="商品名称:" style="width:30%">
            <div>{{formOrderData.productName}}</div>
          </FormItem>
          <FormItem label="业务侧产品编码:" style="width:30%">
            <div>{{formOrderData.productCode}}</div>
          </FormItem>
          <FormItem label="业务场景:" style="width:30%">
            <div>{{formOrderData.orderSource}}</div>
          </FormItem>
          <FormItem label="订单金额:" style="width:30%">
            <div>{{ formOrderData ? `${formOrderData.subOrderAmount / 100}` : '0.00'}}</div>
          </FormItem>
          <FormItem label="实付金额:" style="width:30%">
            <div>{{formOrderData.payAmount ? `${formOrderData.payAmount / 100}` : '0.00'}}</div>
          </FormItem>
          <FormItem label="通道费率:" style="width:30%">
            <div>{{formOrderData.rate ? `${formOrderData.rate}%` : '0.00'}}</div>
          </FormItem>
          <FormItem label="支付渠道:" style="width:30%">
            <div>{{formOrderData.payChannel}}</div>
          </FormItem>
          <FormItem label="支付方式:" style="width:30%">
            <div>{{formOrderData.payWay}}</div>
          </FormItem>
        </div>
      </Form>

      <Form :ref="formRef" :label-width="130" :model="formMerchData" inline>
        <h3 class="title">商户信息</h3>
        <div>
          <FormItem label="商户名称:" style="width:30%">
            <div>{{formMerchData.merchantName}}</div>
          </FormItem>
          <FormItem label="商户编码:" style="width:30%">
            <div>{{formMerchData.merchantCode}}</div>
          </FormItem>
          <FormItem label="组织机构:" style="width:30%">
            <div>{{formMerchData.organizationName}}</div>
          </FormItem>
          <FormItem label="开户行:" style="width:30%">
            <div>{{formMerchData.openingBank}}</div>
          </FormItem>
          <FormItem label="账户结算类型:" style="width:30%">
            <div>{{formMerchData.accountTypeName }}</div>
          </FormItem>
          <FormItem label="银行账号:" style="width:30%">
            <div>{{formMerchData.accountNo }}</div>
          </FormItem>
          <FormItem label="合同有效期:" style="width:30%">
            <div>{{ formMerchData.contractStartDate }} - {{ formMerchData.contractEndDate }}</div>
          </FormItem>
        </div>
      </Form>

      <Form :ref="formRef" :label-width="130" :model="formRuleData" inline>
        <h3 class="title">清分信息</h3>
        <div>
          <FormItem label="清分规则名称:" style="width:30%">
            <div>{{ formRuleData.ruleName }}</div>
          </FormItem>
          <FormItem label="规则类型:" style="width:30%">
            <div>{{ formRuleData.ruleTypeCn }}</div>
          </FormItem>
          <FormItem label="结算类型:" style="width:30%">
            <div>{{ formRuleData.settlementTypeCn }}</div>
          </FormItem>
          <FormItem label="规则编码:" style="width:30%">
            <div>{{ formRuleData.ruleCode }}</div>
          </FormItem>
          <FormItem label="清分规则:" style="width:30%">
            <div>{{ formRuleData.clearingRuleCn }}</div>
          </FormItem>
          <FormItem label="产品单价:" style="width:30%">
            <div>{{ formRuleData.productPrice }}</div>
          </FormItem>
          <FormItem label="平台应收:" style="width:30%">
            <!-- <div>{{ formRuleData.platformReceivable }}</div> -->
            <div>{{ formRuleData.clearingRule == '1' ? `${formRuleData.platformReceivable}%` : formRuleData.clearingRule == '2' ? `${formRuleData.platformReceivable}` : '0.00' }}</div>
          </FormItem>
          <FormItem label="商户应收:" style="width:30%">
            <!-- <div>{{ formRuleData.merchantReceivable }}</div> -->
            <div>{{ formRuleData.clearingRule == '1' ? `${formRuleData.merchantReceivable}%` : formRuleData.clearingRule == '2' ? `${formRuleData.merchantReceivable}` : '0.00' }}</div>
          </FormItem>
          <FormItem label="规则优先级:" style="width:30%">
            <div>{{ formRuleData.priorityLevel }}</div>
          </FormItem>
          <FormItem label="规则生效日期:" style="width:30%">
            <div>{{ formRuleData.effectiveDate }}</div>
          </FormItem>
          <FormItem label="规则失效日期:" style="width:30%">
            <div>{{ formRuleData.expireDate }}</div>
          </FormItem>
          <FormItem label="清分周期:" style="width:30%">
            <div v-if="formRuleData.clearingCycleMode === '1'">T + {{ formRuleData.clearingCycleValue }}</div>
          <div v-if="formRuleData.clearingCycleMode === '2'">{{ formRuleData.clearingCycleValue }}日/{{ formRuleData.clearingCycleValueExt }}个月</div>
          </FormItem>
        </div>
      </Form>

      <h3>规则匹配</h3>
      <br />
      <Table class="tables" border :columns="columns" :data="ruleTableDataList" maxHeight="500">
        <template slot-scope="{ row, index }" slot="action">
          <!-- 拿到清分id 与规则id 匹配，则是当前生效，否则就显示匹配按钮 -->
          <span v-if="row.ruleCode == formRuleData.ruleCode" class="matchbBtn">当前生效</span>
          <Button type="primary" v-else @click="handlerMatch(row)">匹配</Button>
        </template>
      </Table>

      <Button type="primary" @click="goBack" style="margin-bottom: 10px">返回</Button>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../Module/awaitBillClearingModule";
import {
  InputNumber,
  Input,
  Button,
  Select,
  Form,
  FormItem,
  Message,
  Option,
  Tag,
  Table
} from "view-design";
import Loading from "@/components/Loading";
import RemoteSelect from "@/components/RemoteSelect";
import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
export default {
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteSelect,
    RemoteTableSelect,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Select,
    Option,
    Authc,
    Tag,
    Table
  },
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.query.id;
    this.setttleType = this.$route.query.type;
    let res = await this.$store.dispatch(`${namespace}/getDetail`, id);
    if (res.ret === 0) {
      let data = res.data;
      this.formOrderData = data.orderRes || {};
      this.formMerchData = data.merchantRes || {};
      this.formMerchList = data.channelList || {};
      this.formRuleData = data.settlementRuleRes || {};
      this.formBillData = data.platformBillRes || [];
      this.subOrderId = id;
    }
  },
  data() {
    return {
      formRef: Uuid.v1(),
      formOrderData: {}, // 订单信息
      formMerchData: {}, // 商户信息
      formRuleData: {}, // 清分信息
      formBillData: [] /** 平台清分流水 */,
      ruleTableDataList: [] /** 规则列表 */,
      ruleCode: "" /** 清分信息id */,
      subOrderId: '', /** 子订单id */
      setttleType: '', /** 判断是金额缺失 还是规则缺失 */
      columns: [
        {
          title: "规则名称",
          align: "center",
          key: "ruleName",
          minWidth: 120
        },
        {
          title: "规则类型",
          align: "center",
          key: "ruleTypeCn",
          minWidth: 80
        },
        {
          title: "结算类型",
          align: "center",
          key: "settlementTypeCn",
          minWidth: 80
        },
        {
          title: "状态",
          align: "center",
          key: "settlementStatusCn",
          minWidth: 80
        },
        {
          title: "规则生效时间",
          align: "center",
          key: "effectiveDate",
          minWidth: 180
        },
        {
          title: "规则失效时间",
          align: "center",
          key: "expireDate",
          minWidth: 180
        },
        {
          title: "操作",
          align: "center",
          key: "action",
          slot: "action",
          minWidth: 80
        }
      ]
    };
  },
  created() {
    this.getRuleList();
  },
  methods: {
    /** 处理匹配 **/
    async handlerMatch(data) {
      try {
        let code = data.ruleCode;
        let obj = {
          ruleCode: code /** 规则id */,
          subOrderIds: [this.subOrderId] /** 子订单id */
        };
        await this.$store.dispatch(`${namespace}/getMatchDispose`, obj);
        this.$Message.success({
          content: "操作成功"
        });
        setTimeout(() => {
          this.$router.push({
            path: "awaitBill"
          });
        }, 1000);
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    },

    /** 清分规则列表list  -根据 productCode 查询 */
    async getRuleList() {
      try {
        let page = {
          currentPage: 1,
          pageSize: 9999,
          productCode: this.$route.query.productCode
        };
        let res = await this.$store.dispatch(`${namespace}/getRuleList`, {
          ...page
        });
        let data = res.data.data.list;
        this.ruleTableDataList = data;
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  }
};
</script>

<style lang="less">
.awaitBillBox {
  .titleBox {
    color: red;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  .title {
    border-bottom: 1px solid #999;
    padding-bottom: 6px;
  }
  .tables {
    margin-bottom: 20px;
  }
  .matchbBtn {
    color: rgb(109, 231, 109);
  }
}
</style>
